<script setup lang="ts">
import ImageDisplay from '@/components/ImageDisplay.vue'
interface Props {
  img: string
  title: string
  originPrice: number
  currentPrice: number
  specs: string[]
  qty: number
}
const props = withDefaults(defineProps<Props>(), {})
</script>
<template>
  <el-card shadow="hover" class="product-item">
    <el-row :gutter="12">
      <!-- 图片 -->
      <el-col :xs="8" :sm="8" :md="8">
        <ImageDisplay :src="img" img-width="100px" img-height="100px" />
      </el-col>

      <!-- 文案 + 数量 -->
      <el-col :xs="16" :sm="16" :md="16">
        <div class="item-info">
          <div class="title">{{ title }}</div>

          <div class="price">
            <span class="origin">￥{{ originPrice }}</span>
            <span class="current">￥{{ currentPrice }}</span>
          </div>

          <div class="specs">{{ specs.join('，') }}</div>

          <!-- 数字靠右 -->
          <div class="qty"> 件数：{{ qty }} </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped>
.product-item {
  margin-bottom: 12px;
}
/* 关键：把 body 的 padding 改成 5px */
.product-item :deep(.el-card__body) {
  padding: 5px;
}

.item-img {
  width: 100px;
  height: 100px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.title {
  font-size: 15px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.price .origin {
  font-size: 13px;
  color: #999;
  text-decoration: line-through;
  margin-right: 6px;
}
.price .current {
  font-size: 17px;
  color: #f56c6c;
  font-weight: bold;
}

.specs {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qty {
  color: #f56c6c;
  font-size: 13px;
  font-weight: bold;
}
</style>
